<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>BOM管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/layui.css"  media="all">
	<link rel="stylesheet" href="${pageContext.request.contextPath }/assets/css/toastr.min.css"  media="all">
</head>
<body>
	<input class="layui-hide" id="pid">
	<!-- 主页面的模糊搜索 -->
	<div class="demoTable" style="padding:10px 0 0 15px">
    	<div class="layui-inline">
        	<input class="layui-input" name="keyWord" id="keyWord" placeholder="请输入产品名称" autocomplete="off">
    	</div> &nbsp; &nbsp; &nbsp; &nbsp;
    	<button class="layui-btn layui-btn-blue" style="margin: 0 0 0 10px" data-type="reload"><i class="layui-icon layui-icon-search">  搜索</i></button>
	</div>
	
	<!-- 主表 -->
	<table class="layui-hide" id="test" lay-filter="test"></table>
	
	<br><br>
	
	<!-- 子表 -->
	<table class="layui-hide" id="testDetial" lay-filter="testDetial"></table>
	
	<!-- 选择配件的弹出框 -->
	<div id="peiDiv" hidden="hidden">
		<!-- 弹出框的模糊搜索 -->
		<div class="demoTable" style="padding:10px 0 0 15px">
			<label class="layui-form-label">配件名称</label>
		    <div class="layui-inline">
		    	<input class="layui-input" name="paname" id="paname" placeholder="" style="display: inline; width: 80%">
		    </div>
		    <button class="layui-btn layui-btn-blue" style="margin: 0 0 0 10px" data-type="reload"><i class="layui-icon layui-icon-search">  搜索</i></button>
		</div>
		<table class="layui-hide" id="lookupTable2" lay-filter="lookupTable2"></table>
	</div>
	
<script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="edit">选择配件</a>
</script>

<script type="text/html" id="barDemo2">
	<a id="submit" disabled class="layui-btn layui-btn-xs" lay-event="binding">绑定</a>
</script>

<script type="text/html" id="barDemo3">
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
              
<script src="${pageContext.request.contextPath }/assets/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/layui.all.js"></script>
<script src="${pageContext.request.contextPath }/assets/js/jquery.min.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath }/assets/js/toastr.min.js" charset="utf-8"></script>

<script type="text/css">

disabled{
	pointer-events:none;
}	

</script>

<script>
layui.use(['table','layer','upload','form'], function(){
	var table = layui.table;
	var layer = layui.layer,
    form = layui.form;
	
	var $ = layui.jquery, active = {
		reload:function () {
			//产品的模糊搜索
			var pname = $("#keyWord").val();
			table.reload('contenttable',{
				method:'get',
				where:{pname: pname},
				page:{
					curr:1  //重新从第一页开始
				}
			});
			//配件的模糊搜索
			var paname = $("#paname").val();
			table.reload('checkContenttable',{
				method:'get',
				where:{paname: paname},
				page:{
					curr:1  //重新从第一页开始
				}
			});
		}
	}
	
	$('.layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
	
	table.render({
	    elem: '#test'
	    ,url:'${pageContext.request.contextPath }/bomMana/listPageBom.do'
	    ,toolbar: '#toolbarDemo'
	    ,title: 'BOM'
	    ,id :'contenttable'
	    ,limits:[10,20,30]
	    ,cols: [[
	        {field:'left', title:'序号', sort: true, type:'numbers', width: 60}
	      	,{field:'pname', title:'产品名称'}
	      	,{field:'pnum', title:'产品编码'}
	      	,{field:'pcar', title:'规格型号'}
	      	,{field:'pqf', title:'计量单位'}
	      	,{field:'classify', title:'包装规格'}
	      	,{fixed: 'right', title:'操作',  width: 130, toolbar: '#barDemo'}
	    ]]
	    ,page: true
	});
  
	//监听行单击事件(子表)
	 table.on('row(test)', function(obj){
		$("#pid").val(obj.data.pid);
	  	table.render({
		    elem: '#testDetial'
		    ,url:'${pageContext.request.contextPath }/bomMana/listPagePartByProduct.do'
		    ,where:{pid: obj.data.pid}
		    ,title: '产品的配件详情数据表'
		    ,id :'contentDetialTable'
		    ,limits:[10,20,30]
		    ,cols: [[
		    	{field:'left', title:'序号', sort: true, type:'numbers', width: 60}
		    	,{field:'paremark4', title:'车间'}
		    	,{field:'panum', title:'配件编号' }
			     ,{field:'paname', title:'配件名称'}
			     ,{field:'pamodel', title:'配件规格'}
			     ,{field:'paremark1', title:'计量单位'}
			     ,{field:'paremark2', title:'包装规格'}
			     ,{field:'paremark3', title:'数量'}
			     ,{fixed: 'right', title:'操作',  width: 130, toolbar: '#barDemo3'}
		    ]]
		    ,page: true
		});
	});
	
	//监听子表的行工具事件(删除)
	table.on('tool(testDetial)', function(obj){
		var data = obj.data;
		console.log(obj)
		if(obj.event === 'del'){
		  layer.confirm('确定删除吗？', function(index){
		    var paid = obj.data.paid;
		    console.log(paid)
		    var pid = $('#pid').val();
		    $.ajax({
		    	type:'post',
		    	url:'${pageContext.request.contextPath }/bomMana/deleteBom.do',
		    	data:{"paid":paid, "pid":pid},
		    	dataType : "json",
		    	success:function(data){
		    		if(data>0){
		    			toastr.success("删除成功！");
		    			setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
							//关闭模态框
							// 父页面刷新
							window.location.reload();  
						},2000);
		    		}else{
		    			toastr.error("删除失败！");
		    		}
		    	}
		    		
		    })
		    layer.close(index);
		  });
		}
	});
	
	//监听行工具事件(选择配件)
	table.on('tool(test)', function(obj){
		$("#pid").val(obj.data.pid);
		 var data = obj.data;
		 if(obj.event === 'edit'){
			layer.open({
				  type: 1 		//Page层类型
				  ,area: ['1200px', '600px'] //宽  高
				  ,title: '选择配件'
				  ,shade: 0.1 	//遮罩透明度
				  ,maxmin: true //允许全屏最小化
				  ,anim: 1 		//0-6的动画形式，-1不开启
				  ,content: $('#peiDiv')
				  ,success: function () {
					  layui.use(['table'], function(){
						  var table = layui.table;
			                table.render({
			                    elem: '#lookupTable2'
			                    ,url:'${pageContext.request.contextPath }/partMana/listPagePart.do'
			                    /* ,toolbar: '#toolbar' */
			                    ,title: '所有配件'
			                    /* ,height: 450 */
			                    ,id :'checkContenttable'
			                    ,limits:[10,20,30]
			                    ,cols: [[
			                    	{field:'left', title:'序号', sort: true, type:'numbers', width: 60}
			                    	,{field:'paremark4', title:'车间'}
	                        		,{field:'panum', title:'配件编号'}
	       			    			,{field:'paname', title:'配件名称'}
	       			     			,{field:'pamodel', title:'配件规格'}
	       			     			,{field:'paremark1', title:'计量单位'}
	       			     			,{field:'paremark2', title:'包装规格'}
	       			    	 		,{field:'paremark3', title:'数量', edit: 'text'}
	       			    	 		,{fixed: 'right', title:'操作', width: 130, toolbar: '#barDemo2'}
			                    ]]
			                    ,page: true
			                });
			                
			            });
					  form.render();
				  }	
				  ,end: function () {
					window.location.reload();  
			  	  }
			});
		}
	}); 
	
	var flag = 0;
	
    table.on('edit(lookupTable2)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
   		console.log(obj.value); //得到修改后的值
   	  	console.log(obj.field); //当前编辑的字段名
   	 	console.log(obj.data); //所在行的所有相关数据  
   	 	flag = 0;
   	 	//$("#submit").attr("disabled",false);   
   	 	//$("#submit").css("pointer-events","auto");  
    });
	
	//监听弹框的行工具事件(绑定)
	table.on('tool(lookupTable2)', function(obj){
		var pid = $("#pid").val();
		var paid = obj.data.paid;
		var str = obj.data.paremark3;
		var number = str.replace(/\s+/g,"");
		//$("#submit").attr("disabled",true);  //a标签没有disabled属性，不能禁用
		//$("#submit").css("display","none");  //但是可以给修改样式，鼠标不再监听这个事件
		//$("#submit").hide();  //隐藏标签
		if(obj.event === 'binding'){
			if(flag == 0){
				if(number == ''){
					flag = 1;
					toastr.warning("数量不能为空！");
				}else{
					var reg =/^\d{1,3}(\.\d{1,4})?$/;
					if(reg.test(number)){
						$.ajax({
							url : '${pageContext.request.contextPath }/bomMana/saveBom.do',
							data : {"pid":pid, "paid":paid, "number":number},
							type : "post",
							dataType : "json",
							}).done(
								function(res) {
									if (res > 0) {
										flag = 1;
										toastr.success('绑定成功！');
										setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
			    						},2000);
									}else{
										flag = 1;
										toastr.error('绑定失败！');
										setTimeout(function(){  //使用  setTimeout（）方法设定定时2000毫秒
			    						},2000);
									}
								}
							).fail(
								function(res) {
									flag = 1;
									toastr.error('绑定失败！');
								}
							) 
	    			}else{
	    				flag = 1;
	    				toastr.warning("配件数量只能是正数，且最多为3位整数4位小数！");
	    			}
					return false;
				}
			}
		}
	});
});

toastr.options.positionClass = 'toast-top-center'; //提示框的位置设置为中上

</script>
</body>
</html>
